<template>
	<div class="d-flex ai-center jc-center w100V h100V" style="background-color: #fff">
		<div class="left"></div>
		<div class="right">
			<div class="top"></div>
			<div class="center">
				<div style="margin-top: 45px">
					<el-input v-model="userNumber" placeholder="请输入账号">
						<template #prepend>
							<ft-icon name="iconfont icon-avatar-login" class="main-color" size="24px" />
						</template>
					</el-input>
				</div>
				<div style="margin-top: 30px">
					<el-input v-model="userPassword" placeholder="请输入密码" type="password" @keyup.enter="userLogin()">
						<template #prepend>
							<ft-icon name="iconfont icon-a-suozhu_huaban1" class="main-color" size="24px" />
						</template>
					</el-input>
				</div>
				<div style="margin-top: 35px">
					<el-checkbox label="记住密码" v-model="checkList" @change="handleCheckChange"></el-checkbox>
				</div>
				<div v-loading="loading" class="loginBtn" style="margin-top: 35px" @click="userLogin()">登录</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { useUserStore } from "@/store";
const router = useRouter();
const userStore = useUserStore();
const userNumber = ref(""); //账号
const userPassword = ref(""); //密码
const checkList = ref(false); //记住密码
const loading = ref(false); //登录loading
const handleCheckChange = (val) => {
	checkList.value = val;
};
onMounted(() => {
	const name = localStorage.getItem("userNumber");
	if (userNumber) {
		userNumber.value = name;
		userPassword.value = localStorage.getItem("userPassword");
		checkList.value = true;
	}
});
const { proxy } = getCurrentInstance();
const userLogin = async () => {
	try {
		loading.value = true;
		const data = {
			userNumber: userNumber.value,
			userPassword: userPassword.value,
		};
		const res = await userStore.login(data);
		if (checkList.value) {
			localStorage.setItem("userNumber", userNumber.value);
			localStorage.setItem("userPassword", userPassword.value);
		}
		proxy.$modal.msgSuccess(res.message);
		router.push("/");
	} finally {
		loading.value = false;
	}
};
</script>

<style lang="scss" scoped>
.left {
	width: 55%;
	height: 100%;
}

.right {
	width: 45%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;

	.top {
		height: 20%;
	}

	.center {
		height: 65%;
		width: 70%;

		.loginBtn {
			width: 100%;
			height: 48px;
			background-color: #e9f2ff;
			text-align: center;
			line-height: 48px;
			font-size: 18px;
			color: $main-color;
			cursor: pointer;
		}
	}
}
</style>
